<template>

  <div class="shop" >
    <div class="mark" v-if="isScreenShow" @click="screenShow(false)"></div>
    <header>
      <div><span @click="backHandler"> <span class="yo-ico">&#xe5ce;</span> </span> <van-search v-model="value" placeholder="请输入搜索关键词" shape='round' @focus="searchHandler" /> <b>取消</b></div>
      <ul class="choice" @click="clickHandler($event)">
        <li >
          <b @click="showSort">{{selectsort}}<span class="yo-ico">&#xe6be;
</span></b>
        </li>
        <li><b>销量</b></li>
        <li><b @click="showScreen">筛选 <span class="yo-ico">&#xe648;</span></b></li>
        <li><b><span @click="change" class="yo-ico">{{isVertical?"&#xe663;":"&#xe7a9;"}}</span></b></li>
      </ul>
    </header>
    <ul class="sort-list" v-if="isSortShow">
       <li v-for="item,i in sortList" :key="i" @click="selectHandler(item,i)" :class="{select:selectSortNum === i}">
          {{item}} <span class="yo-ico">&#xe61b;</span>
       </li>
    </ul>
    <van-pull-refresh v-model="isLoading"  success-text="刷新成功"  @refresh="onRefresh">

      <ul :class="isVertical?'vertical-row list':'horizontal list'">
        <li v-for="item in shopList" :key="item.id" @click="toDetailsHandler">
          <img :src="item.src">
          <div>
            <p>{{item.name}}</p>
            <h4>￥<b>{{item.price.toFixed(1)}}</b><span v-if="item.free">包邮</span></h4>
            <span>{{item.shopName}}</span>
          </div>
        </li>
      </ul>
    </van-pull-refresh>
    <div class="screen" v-if="isScreenShow">
      <screen></screen>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { PullRefresh } from 'vant';
import { Search } from 'vant';
import { mapActions } from 'vuex'
Vue.use(Search);
Vue.use(PullRefresh);
import Screen from './Screen'
export default {
  components: {
    Screen
  },
  
  methods: {
    ...mapActions(['screenShow']),
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    toDetailsHandler() {
      this.$router.push({ path: '/Details'})
    },
    clickHandler(e) {
    },
    backHandler() {
      this.$router.back();
    },
    change() {
      this.isVertical = !this.isVertical
    },
    showSort() {
      this.isSortShow = !this.isSortShow
    },
    selectHandler(item,i) {
      this.selectsort = item;
      this.selectSortNum = i;
      this.isSortShow = false
    },
    showScreen() {
      this.screenShow(true)
    },
    searchHandler() {
      this.$router.push({path:'/search'})
    }
  },
  data() {
    return {
      selectsort:'综合排序',
      isVertical:true,
      isSortShow:false,
      selectSortNum:0,
      isLoading: false,
      value: '',
      shopList:[
        {
          id:1,
          src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg",
          name:"Daisy女士2020春夏新款白色纯棉印花圆领短袖衬衣",
          price:99,
          free:true,
          shopName:"Daisy服饰旗舰店"
        },
        {
          id:2,
          src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg",
          name:"Daisy女士2020春夏新款白色纯棉印花圆领短袖衬衣",
          price:99,
          free:true,
          shopName:"Daisy服饰旗舰店"
        },
        {
          id:3,
          src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg",
          name:"Daisy女士2020春夏新款白色纯棉印花圆领短袖衬衣",
          price:99,
          free:true,
          shopName:"Daisy服饰旗舰店"
        },
        {
          id:4,
          src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg",
          name:"Daisy女士2020春夏新款白色纯棉印花圆领短袖衬衣",
          price:99,
          free:true,
          shopName:"Daisy服饰旗舰店"
        },
      ],
      sortList:['综合排序', '信用排序','价格降序','价格升序']
    }
  },
  computed:{
    isScreenShow(){
      return this.$store.state.isScreenShow
    }
  },
  
}
</script>

<style lang="stylus" scoped>
 @import '../../assets/common.css'
@import "../../assets/stylus/border.styl";
@import "../../assets/stylus/ellipsis.styl";
.shop
  width 100%
  height 100%
  overflow scroll
  position absolute
  z-index 1
  .mark 
    width 100%
    height 100%
    background-color rgba(0,0,0,0.5)
    top 0
    z-index 600
    position absolute

  .sort-list
    position absolute
    z-index 999
    background-color #fff
    width 100%
    color #666
    font-size .12rem
    line-height .4rem
    li
      padding 0 .15rem
      display flex
      justify-content space-between
    .select 
      color #666ee8
      background-color #f2f2f2
  header 
    width 100% 
    padding 0 .15rem
    border_1px(0 0 1px 0) 
    padding-bottom .12rem
    >div 
      display flex
      margin-top .2rem
      justify-content space-around
      line-height .28rem
      .van-search
        margin 0 .05rem
        flex 1
        padding 0
        border 1px solid #666EE8
        border-radius .28rem
        .van-cell
          padding 2px 8px 2px 0
      b
        font-weight 400
        color #999
        font-size .14rem
    .choice
      display flex 
      font-size .12rem
      color #666
      margin-top .15rem
      li
        flex 1
        text-align right 
        font-size .12rem
        &:first-child
          text-align left 
        &:last-child
          font-size .16rem
          margin-top -.03rem
        &:nth-child(3)
          font-size .12rem 
          span
            font-size .13rem

  .list
    padding 0 .15rem
    li
      height 1.12rem
      img 
        width 1.4rem
        height 1.1rem
  .vertical-row
    li 
      display flex 
      // justify-content space-around
      margin .1rem 0
      div
        padding-left .1rem 
        // width 1.75rem
        padding-top .09rem
        p
          font-size .12rem
          line-height .22rem
          ellipsis(100%,2)
        h4
          color #FF6262
          font-size .12rem
          margin-top .1rem
          b
            font-size .16rem
            margin-left .02rem
          span 
            text-align center  
            display inline-block
            width .34rem
            height .16rem
            border 1px solid rgba(255, 98, 98, 1) 
            border-radius .04rem
            font-weight 400
            font-size .12rem
            margin-left .1rem
            line-height .14rem
        &>span
          font-size .12rem
          color #999
  .horizontal
    display flex
    flex-wrap wrap
    justify-content space-around
    li
      width 1.62rem
      height 2.49rem
      margin .1rem 0
      border_1px(1px)
      z-index 0
      div
        // padding-left .06rem 
        width 1.75rem
        padding 0 .1rem
        padding-top .09rem
        p
          font-size .12rem
          line-height .22rem
        h4
          color #FF6262
          font-size .12rem
          margin-top .1rem
          b
            font-size .16rem
            margin-left .02rem
          span 
            text-align center  
            display inline-block
            width .34rem
            height .16rem
            border 1px solid rgba(255, 98, 98, 1) 
            border-radius .04rem
            font-weight 400
            font-size .12rem
            margin-left .1rem
            line-height .14rem
        &>span
          font-size .12rem
          color #999
      img 
        width 1.62rem
        height 1.29rem

.screen
  height 100%
  position absolute
  top 0
  right 0
  z-index 999
  background-color #fff
</style>